<template>
    <div>
        <Header></Header>
        <div class="mblog">
            <h2>{{blog.title}}</h2>
            <el-link icon="el-icon-edit" v-if="ownBlog">
                <router-link :to="{name:'BlogEdit' ,params :{blogId:blog.id}}">
                编辑
                </router-link>
            </el-link>
            <el-divider></el-divider>
            <div class="markdown-body" v-html="blog.content"></div>

        </div>
    </div>
</template>

<script>
    import Header from "../components/Header";
    import 'github-markdown-css'
    export default {
        name: "BlogDetail",
        components: {Header},
        data(){
            return{
                blog : {
                    id : '',
                    title : '',
                    content : '',

                },
                ownBlog : false
            }

        },
       created() {
           const blogId = this.$route.params.blogId
           const _this = this
           this.$axios.get("/blog/"+blogId).then(res =>{
               console.log(res.data.data);
               const blog = res.data.data
               _this.blog.id = blog.id
               _this.blog.title = blog.title

               var markdownIt  = require("markdown-it")
               var md = new markdownIt()

               var resutlt = md.render(blog.content)

               _this.blog.content = resutlt

               _this.ownBlog = (blog.userId === _this.$store.getters.getUser.id)

           })
       }
    }
</script>

<style scoped>
    .mblog{
        width: 100%;
        min-height: 700px;
        padding: 20px 15px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    }
</style>
